<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>刮刮卡</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #text {
        position: absolute;
        left: 0;
        top: 0;
        width: 500px;
        height: 150px;
        text-align: center;
        line-height: 150px;
        /* background-color: #ccc; */
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="500" height="150"></canvas>
    <div id="text">恭喜中奖50000王万！请及时领取兑换</div>
  </body>
</html>
<script>
  const dom = document.querySelector("#box");
  const context = dom.getContext("2d");

  context.beginPath();
  context.fillStyle = "#666";
  context.fillRect(0, 0, 500, 150);
  context.fill();
  //   如果鼠标按下就为TRUE，抬起为false
  let flag = false;
  function downFn(e) {
    flag = true;
  }
  function moveFn(e) {
    if (flag) {
      const x = e.clientX - dom.offsetLeft;
      const y = e.clientY - dom.offsetTop;
      //   创建O
      context.beginPath();
      context.fillStyle = "#000";
      //图像合成，保证重叠的地方变透明
      context.globalCompositeOperation = "destination-out";

      context.arc(x, y, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
      context.lineWidth = 2;
      context.fill();
    }
  }
  function upFn() {
    flag = false;
  }
  //   鼠标按下，移动抬起事件
  dom.addEventListener("mousedown", downFn, false);
  dom.addEventListener("mousemove", moveFn, false);
  dom.addEventListener("mouseup", upFn, false);
</script>
